<%@ page language="C#" autoeventwireup="true" inherits="Login, App_Web_supvbhfv" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>
<html lang="en" id="main125" runat="server">
  <head runat="server">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Login for Attendnace Management System</title>
      <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
    <!-- Bootstrap -->
    <link href="css/googleapis.css" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" type="text/css" href="css/menumaker.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
	<style>
	body{
	font-family: 'Open Sans', sans-serif;
	}
	body#LoginForm{ background-repeat:no-repeat; background-position:center; background-size:cover; padding:10px;}
	.logo-img
	{
	 margin-left:auto;
	 margin-right:auto;
	 display:block;
	 width: 250px !important;
     height: 96px !important;
	}
	
	form {
        border-radius:30px;
        height:80vh;
  width: 43%;
  margin-top: 60px;
  display:inline-block;
  background: #fff;
  padding: 30px;
  text-align: center;
  -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
  box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
}
label {
  display: block;
  position: relative;
  margin: 34px 0px;
}
input {
  width: 100%;
  padding: 2px;
  background: transparent;
  border: none;
  outline: none;
}

.line-box {
  position: relative;
  width: 100%;
  height: 2px;
  background: #BCBCBC;
}

.line {
  position: absolute;
  width: 0%;
  height: 2px;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  background: #8BC34A;
  transition: ease .6s;
}

input:focus + .line-box .line {
  width: 100%;
}

.label-txt {
  position: absolute;
  top: -1.6em;
  padding: 8px;
  font-size: 16px;
  letter-spacing: 1px;
  color: rgb(120,120,120);
  transition: ease .3s;
  font-weight:500;
}

.form-control
{
  font-weight:500 !important;
 color: rgb(120,120,120) !important;
  font-size: 16px !important;
}

.label-active {
  top: -2em;
}

button {
  display: inline-block;
  padding: 12px 24px;
  background: rgb(220,220,220);
  font-weight: bold;
  color: rgb(120,120,120);
  border: none;
  outline: none;
  border-radius: 3px;
  cursor: pointer;
  transition: ease .3s;
}

button:hover {
  background: #8BC34A;
  color: #ffffff;
}
.login-btn
{
  display: inline-block;
    padding: 12px 24px;
    background: #ff6d00;
    font-weight: 500;
    color: #fff;
    border: none;
    outline: none;
    border-radius: 3px;
    cursor: pointer;
    transition: ease .3s;
    width: 100%;
    border-radius: 50px;
	  -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
  box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
      font-size: 18px;
}


/* Change Color*/
.site-memubar-green input#Button1.login-btn
{
   background: linear-gradient(60deg, #66bb6a, #43a047) !important;
}
.site-memubar-green .fa-home
{
    color:#66bb6a !important;
}
.site-memubar-red input#Button1.login-btn
{
   background: linear-gradient(60deg, #ef5350, #e53935) !important;
}
.site-memubar-red .fa-home
{
    color:#ef5350 !important;
}
.site-memubar-blue input#Button1.login-btn
{
   background: linear-gradient(60deg, #26c6da, #00acc1) !important;
}
.site-memubar-blue .fa-home
{
    color:#26c6da !important;
}
.site-memubar-pink input#Button1.login-btn
{
   background: #FF1493 !important;
}
.site-memubar-pink .fa-home
{
    color:#FF1493 !important;
}
.site-memubar-orange input#Button1.login-btn
{
   background: #FE4800 !important;
}
.site-memubar-orange .fa-home
{
    color:#FE4800 !important;
}
.site-memubar-black input#Button1.login-btn
{
   background: #000 !important;
}
.site-memubar-black .fa-home
{
    color:#000!important;
}
.site-memubar-darkviolet input#Button1.login-btn
{
   background: #9400D3 !important;
}
.site-memubar-darkviolet .fa-home
{
    color:#9400D3!important;
}
.site-memubar-magenta input#Button1.login-btn
{
   background: #FF00FF !important;
}
.site-memubar-magenta .fa-home
{
    color:#FF00FF !important;
}
.site-memubar-purple input#Button1.login-btn
{
   background: #800080 !important;
}
.site-memubar-purple .fa-home
{
    color:#800080 !important;
}
.site-memubar-indigo input#Button1.login-btn
{
   background: #4B0082 !important;
}
.site-memubar-indigo .fa-home
{
    color:#4B0082 !important;
}

.site-memubar-green1 input#Button1.login-btn
{
   background: #11C26D !important;
}
.site-memubar-green1 .fa-home
{
    color:#11C26D !important;
}

.site-memubar-lightgreen input#Button1.login-btn
{
   background: #6DA611 !important;
}
.site-memubar-lightgreen .fa-home
{
    color:#6DA611 !important;
}

.site-memubar-lightblue input#Button1.login-btn
{
   background: #3E8EF7 !important;
}
.site-memubar-lightblue .fa-home
{
    color:#3E8EF7 !important;
}

.site-memubar-gray input#Button1.login-btn
{
   background: #757575 !important;
}
.site-memubar-gray .fa-home
{
    color:#757575 !important;
}

.site-memubar-bluegrey input#Button1.login-btn
{
   background: #526069 !important;
}
.site-memubar-bluegrey .fa-home
{
    color:#526069 !important;
}

.site-memubar-brown input#Button1.login-btn
{
   background: #997B71 !important;
}
.site-memubar-brown .fa-home
{
    color:#997B71 !important;
}

.site-memubar-yellow input#Button1.login-btn
{
   background: #FFCD17 !important;
}
.site-memubar-yellow .fa-home
{
    color:#FFCD17 !important;
}
#cssmenu{margin-top:0px;font-family:'Open Sans'}
.site-memubar-teal input#Button1.login-btn
{
   background: #17B3A3 !important;
}
.site-memubar-teal .fa-home
{
    color:#17B3A3 !important;
}

.site-memubar-cyan input#Button1.login-btn
{
   background: #0BB2D4 !important;
}
.site-memubar-cyan .fa-home
{
    color:#0BB2D4 !important;
}

.site-memubar-oattendred input#Button1.login-btn
{
   background: #E31E24 !important;
}
.site-memubar-oattendred .fa-home
{
    color:#E31E24 !important;
}
.site-memubar-advisionred input#Button1.login-btn
{
   background: #bd1522 !important;
}
.site-memubar-advisionred .fa-home
{
    color:#bd1522 !important;
}
.site-memubar-oattendgray input#Button1.login-btn
{
   background: #4f4f51 !important;
}
.site-memubar-oattendgray .fa-home
{
    color:#4f4f51 !important;
}
#navigation-menu li a:hover
{
    background: #E15B11;
    color: #fff !important;
}
.active
{
      background: #E15B11;
   
}
.active a
{
  color: #fff !important;   
}
#cssmenu > ul > li > a {
    padding: 15px;
    font-size: 14px;
    text-decoration: none;
    color: #666;
}
#cssmenu > ul > li {
    float: left;
    margin-left: -14px;
}
#navigation-menu
{
    margin-right:80px !important;
}
#cssmenu > ul > li {
    float: left;
    margin-left: 14px !important;
}
@media only screen and (min-width:1200px){
    .gipphy{
        margin-right:50px;
    }
}
/* End Change Color*/
@media (min-width:0px) and (max-width: 767px) 
{
    form {
    width: 100% !important;
    margin: 15px auto;
    background: #fff;
    padding: 25px !important;
    text-align: center;
    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
    box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
}
}
.header-main{
    position:fixed;
    top:0;
    width:100%;
    margin-left:-10px;
}
	</style>
<script>
    function validateForm() {
        var x = document.forms["form1"]["TextBox1"].value;
        var y = document.forms["form1"]["TextBox2"].value;
        var z = document.forms["form1"]["TextBox3"].value;
        if (x == null || x == "") {
            alert("Corporate Id is Not Empty");
            return false;
        }
//        if ((x.length < 3) || (x.length > 8)) {
//            alert("Your Character must be 3 to 8 Character");
//            return false;
//        }

        
        
        if (y == null || y == "") {
            alert("User Name is Not Empty");
            return false;
        }

//        re = /^\w+$/;
//        if (!re.test(form1.TextBox2.value)) {
//            alert("Error: Username must contain only letters, numbers and underscores!");
//            return false;
//        }
//        if ((y.length < 3) || (y.length > 8)) {
//            alert("Your Character must be 3 to 8 Character");
//            return false;
//        }
        if (z == null || z == "") {
            alert("Password is Not Empty");
            return false;
        }

//        re2 = /[0-9]/;
//        if (!re2.test(form1.TextBox3.value)) {
//            alert("Error: password must contain at least one number (0-9)!");
//            form.pwd1.focus();
//            return false;
//        }
//        re3 = /[a-z]/;
//        if (!re3.test(form1.TextBox3.value)) {
//            alert("Error: password must contain at least one lowercase letter (a-z)!");
//            form.pwd1.focus();
//            return false;
//        }
//        if ((z.length < 3) || (z.length > 8)) {
//            alert("Your Character must be 3 to 8 Character");
//            return false;
//        }
    }
</script>

        	<script type="text/javascript">
        	    function restrictNumber(e) {

//        	        if ((event.keyCode > 64 && event.keyCode < 91) || (event.keyCode > 96 && event.keyCode < 123) || event.keyCode == 8)
//        	            return true;
//        	        else {
//        	            alert("Please enter only char");
//        	            return false;
//        	        }

        	    }
		</script>


  </head>
  <body id="LoginForm" style="background-image:url('images/blur.jpg')">
      <p>
          v</p>
    <div class="header-main" style="box-shadow: 0 5px 5px -7px #333; margin-bottom:0px;background-color:#fff;">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <div class="logo">
        <center>
            <%--  <img src="images/logo.png"> --%><img  height="55" alt="Realtime" id="Img" runat="server" />
        </center>
      </div>
    </div>
    <div class="col-md-10 "> 
    <div id="cssmenu">
	<ul id="navigation-menu" style="float:right">
    <li ><a href="Default.aspx">&nbsp;<i class="fa fa-home"></i> Home</a></li>
		
		<li class="active" style="margin-left:10px;">
			<a href="Login.aspx"><i class="fa fa-sign-in"></i> Login</a>
			
		</li>
        
        <li style="margin-left:10px; visibility:hidden" id="Pricelist" runat="server" visible="false">
			<a href="NewPrice.aspx">Price</a>
			
		</li>
       <!-- <li><a href="contact-us.html">Contact Us</a></li>-->
        <li><a href="#" ><i class="fa fa-envelope-o"></i>&nbsp;<asp:Label
            ID="lblemail" runat="server" Text=""></asp:Label></a></li>
        <li style="margin-top:-2px;"><a href="#"><i class="fa fa-phone" style="position: relative;top: 2px; font-size: 16px;"></i>&nbsp;<asp:Label ID="lblphoneno"
            runat="server" Text=""></asp:Label></a></li>
	</ul>
</div>
    
    
    </div>
  </div>
</div></div>
    <div class="container-fluid" >
        <div class="row">
            <div class="col-lg-6" style="background-color:#fff;margin-right:20px;margin-top:60px;margin-left:40px;height:80vh;text-align:center;border-radius:30px;">
        <div class="gipphy">
            <img src="images/vtms-gif.gif" width=500px" />
        </div>
            </div>
            <div class="col-lg-6"></div>
     <form id="form1" runat="server" onsubmit="return validateForm()">

	<div class="row">
     <a href="https://play.google.com/store/apps/details?id=com.RealtimeBiometrics.realtime"
	 <img  height="55" alt="Realtime" id="output" runat="server" /></a> 
	</div>
	<div class="row" style="margin-top:20px; padding:0 130px;">
	
	<form>
	<%--<h4>Enter your Login Name and password to sign in</h4>--%>
<%--  <label style="display:none;">--%>
  <label  style="display:none">
    <p style="font-size: 16px; letter-spacing: 1px; color: rgb(120,120,120); font-weight:500; text-align:left;">Select Language*</p>
  <%-- <select class="form-control" style="height:40px;">
   	<option value="0">English</option>
	<option value="6">Spanish</option>
	<option value="1">Arabic</option>
	<option value="2">Persian</option>
	<option value="3">Turkish</option>
	<option value="4">Thai</option>
	<option value="5">Chiness</option>
	<option value="6">vietnamese</option>
   </select>--%>

       <asp:DropDownList ID="ddlLanguage"   runat="server" class="form-control" 
        style="height:40px;" onselectedindexchanged="ddlLanguage_SelectedIndexChanged">
              <asp:ListItem Text="Select" Value="-1"></asp:ListItem>
                                                            <asp:ListItem Text="English" Value="0"></asp:ListItem>
                                                           <%-- <asp:ListItem Text="Spanish" Value="1"></asp:ListItem>
                                                            <asp:ListItem Text="Arabic" Value="2"></asp:ListItem>
                                                            <asp:ListItem Text="Persian" Value="3"></asp:ListItem>
                                                            <asp:ListItem Text="Turkish" Value="4"></asp:ListItem>
                                                            <asp:ListItem Text="Thai" Value="5"></asp:ListItem>
                                                            <asp:ListItem Text="Chiness" Value="6"></asp:ListItem>
                                                      
                                                            <asp:ListItem Text="Danish" Value="8"></asp:ListItem>
                                                            <asp:ListItem Text="Swedish" Value="9"></asp:ListItem>
                                                            <asp:ListItem Text="Norwegian" Value="10"></asp:ListItem>--%>

                                                        </asp:DropDownList>

                                                      
  </label>
        <label style="margin:0px;text-align:left;letter-spacing:1px;margin-left:9px;font-weight:500;color:rgb(120,120,120);">
            Login Type:
        </label>
        <asp:DropDownList ID="DropDownList1" runat="server" class="form-control" style="margin-bottom:40px;" AutoPostBack="True">
             


        </asp:DropDownList>
  <label>
    <p class="label-txt">User Name*</p>
 <%--   <input type="text" class="input">--%>

   <asp:TextBox runat="server" MaxLength="255" ID="TextBox2" class="input"
                                                            type="text" size="50" Height="27"></asp:TextBox>
    <div class="line-box">
      <div class="line"></div>
    </div>
  </label>
  <label>
    <p class="label-txt">Password *</p>
    <%--<input type="text" class="input">--%>

         <asp:TextBox runat="server" class="input" 
        OnTextChanged="TextBox3_TextChanged" type="password" size="50"
                                                            Height="27" 
        TextMode="Password" ID="TextBox3"></asp:TextBox>
    <div class="line-box">
      <div class="line"></div>
    </div>
  </label>
  <%--<button type="submit" class="login-btn" id="ss" runat="server">Log In</button>--%>
    <asp:Button ID="Button1" runat="server"  class="login-btn" Text="Log In" 
        onclick="Button1_Click" />
  <%--<p style="margin-top:10px; text-align:left">Don't have an account? <a ui-sref="signUp" href="signup.aspx" style="color:#ff6d00;">Sign Up</a>.  <a ui-sref="forgetpsd" href="forgetpsd.aspx" style="color:#ff6d00; float: right; text-decoration: underline;">Forget password</a></p>--%>
</form>
<div class="row" style="margin-top:40px">
    <img src="images/android.png" /> <img src="images/ios.png" />
    </div>
	</div>
    
	</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>

    <script src="js/bootstrap.min.js" type="text/javascript"></script>
	<script>
	    $(document).ready(function () {

	        $('input').focus(function () {
	            $(this).parent().find(".label-txt").addClass('label-active');
	        });

	        $("input").focusout(function () {
	            if ($(this).val() == '') {
	                $(this).parent().find(".label-txt").removeClass('label-active');
	            };
	        });

	    });
	</script>
    </form>
</body>
</html>
